How to create carousel using javascript and hover to prev and next image with keypress?

I want to create carousel using javascript which have an array of infinity images and after last image ends it should start from first image.On page load the first image should be selected by default and have active border on first image. When keypress right arrow or left arrow the image active border should move accordingly to next or prev image. And when press enter the active border image should get selected and opens link.

I have tried creating carousel but on keypress arrow left or right it doesn't work.

// Hover
var active = document.querySelector(".hover") || document.querySelector(".myImg a");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
    console.log(e.which);
        active.classList.remove("hover");
           switch (e.keyCode) {
        case 37:
        active = active.previousElementSibling || active;
            break;
        case 39:
            active = active.nextElementSibling || active;
            break;
    default: active = e.target;
    }

        active.classList.add("hover");
}

// Carousel
var carousel = document.querySelector('.content');
var slider = document.querySelector('.slider');

var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var imagesA = document.querySelector('.carousel-img');
//  var vid = document.querySelector('.videos');
var direction;

next.addEventListener('click', function () {
    direction = -1;
    carousel.style.justifyContent = 'flex-start';
    slider.style.transform = 'translate(-20%)';
});

prev.addEventListener('click', function () {
    if (direction === -1) {
        direction = 1;
        slider.appendChild(slider.firstElementChild);
    }
    carousel.style.justifyContent = 'flex-end';
    slider.style.transform = 'translate(20%)';

});



slider.addEventListener('transitionend', function () {
    if (direction === 1) {
        slider.prepend(slider.lastElementChild);
    } else {
        slider.appendChild(slider.firstElementChild);
    }

    slider.style.transition = 'none';
    slider.style.transform = 'translate(0)';
    setTimeout(() => {
        slider.style.transition = 'all 0.5s';
    })
}, false);

It can be like we see on netflix home carousel where we have list of movies covers but instead of mouse click or mouse over i want same behaviour with Keypress.Please help.

CODE HERE : codepen.io